import React, {useEffect} from "react";
import {Button, Col, DatePicker, Form, Input, Modal, Row, Select} from "antd";
import {Contract} from "@/types/resp/contract";

interface ContractViewProps {
  visible: boolean;
  viewRow: object;
  onCloseContractView: () => void;
}

const ContractView: React.FC<ContractViewProps> = ({visible, viewRow, onCloseContractView}) => {

  const [form] = Form.useForm<Contract>();

  const onBack = () => {
    onCloseContractView()
  };

  useEffect(() => {
    if (!visible) {
      return
    }
    if (viewRow) {
      form.setFieldsValue(viewRow);
    }
  }, [viewRow]);

  const addFooter = (
    <div className='custom-footer'>
      <Button type="primary" onClick={onBack}>关闭</Button>
    </div>
  );

  return (
    <Modal title={"劳动合同信息详情"} open={visible} onCancel={onCloseContractView}
        width={'var(--modal-width)'} footer={addFooter} style={{marginTop: 'var(--modal-margin-top)'}}>
      <Form form={form} labelCol={{span: 6}} disabled={true}>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="employeeName" label="员工姓名">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="contractSignDate" label="合同签订日期">
              <DatePicker/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="contractType" label="合同类型">
              <Select placeholder="请选择合同类型" options={[
                { value: 10, label: <span>全职</span> },
                { value: 20, label: <span>兼职</span> },
                { value: 30, label: <span>实习</span> }
              ]} />
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="effectiveDate" label="生效日期">
              <DatePicker/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="expiryDate" label="到期日期">
              <DatePicker/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="state" label="合同状态">
              <Select placeholder="请选择合同状态" options={[
                { value: 10, label: <span>有效</span> },
                { value: 20, label: <span>终止</span> },
                { value: 30, label: <span>续签</span> }
              ]} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="workLocation" label="工作地点">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="workingHours" label="工作时间">
              <Input/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={22}>
            <Form.Item name="jobDescription" label="岗位职责" labelCol={{span: 3}}>
              <Input.TextArea autoSize={{ minRows: 3, maxRows: 3 }}/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={11}>
            <Form.Item name="createTime" label="创建时间">
              <Input/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="modifyTime" label="最后修改时间">
              <Input/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

export default ContractView;
